import React , { PureComponent , PropTypes } from 'react';

import styles from './style.scss';

import ReactSwipe from 'react-swipe';

const baseStyle = {
    container:{
        height:"100%"
    },
    wrapper:{
        height:"100%",
        position:"relative"
    },
    child:{
        float: "left",
        height:"100%",
        position: "relative"
    }
};

export default class Banner extends PureComponent {

    static propTypes = {
        height:PropTypes.number
    };

    state = {
        page:0
    };

    static defaultProps = {
        height:160
    };

    render(){
        const { height , children } = this.props;
        const count = React.Children.count(children);
        return (
            <div className={styles.banner_wrapper} style={{height}}>
                {!!count && (
                    <ReactSwipe
                        key={count}
                        style={baseStyle}
                        swipeOptions={{
                            callback:(i)=>{
                               this.setState({
                                   page:i
                               })
                            }
                        }}

                    >
                        {children}
                    </ReactSwipe>
                )}
                {!!count &&(
                    <ul className={styles.banner_shoot}>
                        {Array.from({length:count}).map((a,i)=>{
                            const active = i === this.state.page ? styles.shoot_active : null;
                            return (
                                <li className={classname(styles.shoot,active)} key={i}/>
                            )
                        })}
                    </ul>
                )}
            </div>
        )
    }
}